<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>精彩瞬间</title>
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/style.css">
</head>

<body>
    <div class="top">
        <ul class="loginbar clearboth container">
            <li><a href="index.html">跳进地理书的旅行</a></li>
            <li>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="rigister.html">注册</a></li>
            <li><a href="login.html">登录</a></li>
        </ul>
    </div>
    <div id="header">
        <ul class="nav clearboth container">
            <li><a href="index.html">首页</a></li>
            <li><a href="role_intro.html">成员介绍</a></li>
            <li><a href="contactus.html">相关图集</a></li>
            <li><a href="atlas.html">回忆唱片</a></li>
            <li><a href="video.html">精彩瞬间</a></li>
            <li><a href="yulu.html">旅行语录</a></li>
            <li><a href="bochu.html">收视情况</a></li>
        </ul>
    </div>
    <div class="container">
        <div class="column-title">
            <h3>精彩瞬间</h3>
        </div>
        <div class="video-top flexbox">
            <div class="video-top-left">
                <video src="video/精彩片段.mp4" width="100%" height="100%" controls autoplay muted loop></video>
            </div>
            <div class="video-top-right column-text">
                <h2>宇宙的有趣我都在意B面</h2>
                <h3>剧情简介</h3>
                <p>乘兴而来，尽兴而归，带着这一路的回忆与收获，跳地团一起抵达了旅程的终点。跳地团一起完成结业考试，并对之前的“经费风云”进行了全员复盘，跳地团终解经费疑云。随着最后一页轻轻合上，跳地团的旅程圆满落幕，在饭桌上好友们畅聊展望未来，期待下一次旅程。</p>
            </div>
        </div>
        <div class="column-title">
            <h3>跳地音乐畅听</h3>
        </div>
        <div class="video-column-music">
            <ul>
                <li>
                    <p>跳进明天的旅程</p>
                    <audio src="music/跳进明天的旅程.MP3" controls></audio>
                </li>
                <li>
                    <p>风</p>
                    <audio src="music/风.MP3" controls></audio>
                </li>
                <li>
                    <p>宇宙情歌</p>
                    <audio src="music/宇宙情歌.MP3" controls></audio>
                </li>
                <li>
                    <p>宇宙信封</p>
                    <audio src="music/宇宙信封.MP3" controls></audio>
                </li>
            </ul>
        </div>
        <div class="column-title">
            <h3>跳地片段合集</h3>
        </div>
        <div class="video-clip-card-wrapper flexbox">
            <div class="video-clip-card">
                <div class="video-clip-v">
                    <video src="video/video1.mp4" controls width="100%" height="135px"></video>
                </div>
            </div>
            <div class="video-clip-card">
                <div class="video-clip-v">
                    <video src="video/video2.mp4" controls width="100%" height="135px"></video>
                </div>
            </div>
            <div class="video-clip-card">
                <div class="video-clip-v">
                    <video src="video/video3.mp4" controls width="100%" height="135px"></video>
                </div>
            </div>
            <div class="video-clip-card">
                <div class="video-clip-v">
                    <video src="video/video4.mp4" controls width="100%" height="135px"></video>
                </div>
            </div>
            <div class="video-clip-card">
                <div class="video-clip-v">
                    <video src="video/video5.mp4" controls width="100%" height="135px"></video>
                </div>
            </div>
        </div>
    </div>
    <div class="copyright">
        202201140011 陈鑫 数媒22-2
    </div>
</body>

</html>